<template>
  <div id="left-Table">
    <!-- 异常 -->
    <div class="abnormal">
      <div class="title">
        111
        <!-- <el-tabs v-model="abnormalName" @tab-click="handleClick">
          <el-tab-pane label="状态异常" name="first">状态异常</el-tab-pane>
          <el-tab-pane label="故障异常" name="second">故障异常</el-tab-pane>
          <el-tab-pane label="分类故障" name="third">分类故障</el-tab-pane>
        </el-tabs> -->
      </div>
      <div class="textCenter">
        <el-table :data="tableData" style="width: 90%; margin: 5px auto 0">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="type" label="地址"> </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 异常 -->
    <!-- 告警 -->
    <div class="alarm">
      <div class="title">11</div>
      <div class="textCenter text">
        <div
          v-for="(i, index) in textt"
          :key="index"
          style="width: 90%; margin: 5px auto 0"
        >
          {{ i.time }} <span style="color: #5e94aa"> {{ i.text }}</span>
        </div>
      </div>
    </div>
    <!-- 告警 -->
    <!-- 检修 -->
    <div class="overhaul">
      <div class="title">11</div>
      <div class="textCenter">
        <el-table :data="tableData" style="width: 90%; margin: 5px auto 0">
          <el-table-column prop="date" label="日期"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="type" label="地址"> </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 检修 -->
  </div>
</template>
<script>
import "../../assets/leftTable.css";
export default {
  name: "leftTable",
  components: {},
  props: {},
  data() {
    return {
      abnormalName: "second",
      textt: [
        {
          time: "2022-10-10 20:00:00",
          text: "220KV配电装置几号楼1楼6号 电容器盒风扇故障",
        },
        {
          time: "2022-10-12 20:00:00",
          text: "220KV配电装置几号楼1楼6号 电容器盒风扇故障",
        },
        {
          time: "2022-10-10 20:00:00",
          text: "220KV配电装置几号楼1楼6号 电容器盒风扇故障",
        },
        {
          time: "2022-10-10 20:00:00",
          text: "220KV配电装置几号楼1楼6号 电容器盒风扇故障",
        },
      ],
      tableData: [
        {
          date: "站点1",
          name: "城中村一号",
          type: "出口超压",
        },
        {
          date: "站点1",
          name: "城中村一号",
          type: "出口超压",
        },
        {
          date: "站点1",
          name: "城中村一号",
          type: "出口超压",
        },
        {
          date: "站点1",
          name: "城中村一号",
          type: "出口超压",
        },
        {
          date: "站点1",
          name: "城中村一号",
          type: "出口超压",
        },
        {
          date: "站点1",
          name: "城中村一号",
          type: "出口超压",
        },
        {
          date: "站点1",
          name: "城中村一号",
          type: "出口超压",
        },
        {
          date: "站点2",
          name: "城中村一号",
          type: "出口超压",
        },
        {
          date: "站点3",
          name: "城中村一号",
          type: "出口超压",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped>
.el-table /deep/th {
  padding: 0;
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.el-table /deep/td {
  padding: 0;
  font-size: 12px;
  color: #fff;
  text-align: center;
}
</style>
